<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>绘制矩形</title>
    <style>
        canvas {
            display: block;
            margin: 10px auto 0;
            border: 1px solid orange;
        }
    </style>
</head>

<body>
    <canvas id="canvas" width="600" height="500">您的浏览器不支持canvans</canvas>
</body>
<script>
    const canvans = document.getElementById('canvas')
    const ctx = canvans.getContext('2d')

    const getPixelRatio = context => {
        return window.devicePixelRatio || 1
    }

    /**
     *  01. 放大canvas
     *  02. 在css中将宽高设置为原来的大小
     *  03. 考虑到内容的缩放，因此也需要将ctx 缩放
     * */
    const ratio = getPixelRatio()
    const oldWith = canvans.width
    const oldHeight = canvans.height
    // 放大canvas
    canvans.width = canvans.width * ratio
    canvans.height = canvans.height * ratio
    // css中设置为原来的大小
    canvans.style.width = oldWith + 'px'
    canvans.style.height = oldHeight + 'px'
    // 缩放ctx
    ctx.scale(ratio, ratio)

    // 绘制居中线条
    ctx.beginPath()
    ctx.lineWidth = 1
    ctx.strokeStyle = '#ccc'
    ctx.moveTo(300,0)
    ctx.lineTo(300,500)
    ctx.stroke()
    ctx.closePath()

    ctx.beginPath()
    ctx.lineWidth = 1
    ctx.strokeStyle = '#ccc'
    ctx.moveTo(0,250)
    ctx.lineTo(600,250)
    ctx.stroke()
    ctx.closePath()

    // 实心文字 描边文字
    ctx.fillStyle = 'orange'
    ctx.strokeStyle = 'hotpink'
    ctx.font = 'bold 60px 微软雅黑'
    ctx.fillText('敲出真谛',100,125,100)
    ctx.strokeText('大前端',400,125)
    ctx.strokeText('可视化',100,375,100)
    ctx.fillText('全栈',400,375)

    // 设置水平和竖直对齐方式
    ctx.textAlign = 'center' // left right start end center
    ctx.textBaseline = 'middle' // top bottom middle
    ctx.fillText('因为有你心存感激',300,250)
</script>

</html>